<div class="query-container" ng-controller="QueryController">
  <div class="query-header">
    <span class="label label-warning" ng-show="item.selectedRequestType"> {{item.selectedRequestType}}</span>
    <h5><a href="javascript:void(0)" ng-click="changeQuery()"
           bs-tooltip="item.executedQuery">{{item.executedQuery}}</a>
    </h5>
  </div>
  <div class="query-actions bookmarks">

    <div class="btn-toolbar">
      <div class="btn-group">
        <a class="" href="javascript:void(0)"
           ng-click="sendToGraph(item)"
           data-title="Send to Graph"
           data-placement="top-right"
           data-animation="am-fade-and-scale" data-container="body"
           bs-tooltip>
          <i class="fa fa-circle-o"></i>
        </a>
      </div>
      <div class="btn-group">
        <a class="" href="javascript:void(0)" data-placement="bottom"
           data-title="Add bookmark"
           data-template-url="views/database/bookmark.html"
           bs-popover>
          <i data-title="Add to bookmarks"
             data-placement="top-right"
             data-animation="am-fade-and-scale"
             data-container="body" bs-tooltip
             ng-class="bookIcon"></i>
        </a>
      </div>
      <div class="btn-group">
        <a class="" href="javascript:void(0)"
           ng-click="removeItem(item)"
           data-title="Remove from history"
           data-animation="am-fade-and-scale"
           data-placement="top-right"
           data-container="body" bs-tooltip>
          <i class="fa fa-trash-o"></i>
        </a>
      </div>
    </div>
  </div>
  <div class="query-body">
    <div ng-show="current == 'table'">
      <!--<table ng-table="tableParams" show-filter="false"-->
      <!--class="table  table-striped table-bordered table-hover table-condensed result-table">-->
      <!--<thead>-->
      <!--<tr class="subHeader">-->
      <!--<th class="text-center" ng-if="value.span > 0" colspan="{{value.span}}"-->
      <!--ng-repeat="(key, value) in item.subHeaders">-->
      <!--{{value.name}}-->
      <!--</th>-->
      <!--</tr>-->
      <!--<tr class="queryfield-header">-->
      <!--<th ng-class="isDivider($index,header)" class="sortable"-->
      <!--ng-click="sort(header)"-->
      <!--ng-repeat="header in item.headers">-->
      <!--<div>-->
      <!--{{header | nograph}}-->
      <!--</div>-->
      <!--</th>-->
      <!--</tr>-->
      <!--</thead>-->
      <!--<tbody>-->
      <!--<tr ng-repeat="result in $data track by $index">-->
      <!--<td ng-repeat="header in item.headers">-->
      <!--<div ng-if="isRid(result[header])">-->
      <!--<a href="{{linkRid(result[header])}}">-->
      <!--{{result[header]}} </a>-->
      <!--</div>-->
      <!--<div ng-if="isClass(header)">-->
      <!--<a href="{{linkClass(result[header])}}">-->
      <!--<span class='label label-primary' ng-style='getColorClass()'> {{result[header]}} </span>-->
      <!--</a>-->
      <!--</div>-->
      <!--<div ng-if="isRids(result[header])">-->
      <!--&lt;!&ndash;<div ridrender="">&ndash;&gt;-->
      <!--&lt;!&ndash;</div>&ndash;&gt;-->
      <!--{{result['@rid']}}-->
      <!--<ridrender2 value="result[header]">-->
      <!--{{result['@rid']}}-->
      <!--</ridrender2>-->
      <!--</div>-->
      <!--<div ng-if="isBinary(result,header)">-->
      <!--[binary-data]-->
      <!--</div>-->
      <!--<div ng-if="otherwise(result,result[header],header)">-->
      <!--{{result[header]}}-->
      <!--</div>-->

      <!--</td>-->
      <!--</tr>-->
      <!--</tbody>-->
      <!--</table>-->

      <div class="table-responsive">
        <table st-table="displayedRecords" st-safe-src="item.resultTotal"
               class="table table-striped table-bordered table-hover table-condensed pointer table-schema">
          <thead>
          <tr class="subHeader">
            <th class="text-center" ng-if="value.span > 0" colspan="{{value.span}}"
                ng-repeat="(key, value) in item.subHeaders">
              {{value.name}}
            </th>
          </tr>
          <tr class="queryfield-header">
            <th ng-class="isDivider($index,header)" class="sortable"
                ng-click="sort(header)"
                ng-repeat="header in item.headers">
              <div>
                {{header | nograph:item.headersType}}
              </div>
            </th>
          </tr>
          <tbody>
          <tr ng-repeat="result in displayedRecords ">
            <td ng-repeat="header in item.headers">
              <div ng-if="isRid(result[header])">
                <a href="{{linkRid(result[header])}}">
                  {{result[header]}} </a>
              </div>
              <div ng-if="isClass(header)">
                <a href="{{linkClass(result[header])}}">
                  <span class='label label-primary' ng-style='getColorClass()'> {{result[header]}} </span>
                </a>
              </div>
              <div ng-if="isRids(result[header])">
                <!--<div ridrender="">-->
                <!--</div>-->
                <ridrender2 value="result[header]">
                </ridrender2>
              </div>
              <div ng-if="isBinary(result,header)">
                [binary-data]
              </div>
              <div ng-if="otherwise(result,result[header],header)">
                {{result[header]}}
              </div>
            </td>
          </tr>
          </tbody>
          <tfoot>
          <tr>
            <td colspan="{{item.headers.length}}" class="text-center">
              <div st-pagination="" st-items-by-page="itemByPage" st-displayed-pages="7"></div>
            </td>

          </tr>
          <tr>
            <td colspan="{{item.headers.length}}">
              <div class=" btn-group pull-right ng-scope">
                <button ng-repeat="count in counts" ng-click="changeItemByPage(count)"
                        ng-class="{ 'active' : count === itemByPage}" type="button"
                        class="btn btn-default ng-scope"><span>{{count}}</span></button>
              </div>
            </td>
          </tr>
          </tfoot>
        </table>
      </div>
    </div>

    <div ng-show="current == 'raw'" class="jsonView">
      <div class="row">
        <div jsontext ui-codemirror="viewerOptions" ng-model="item.rawData"
             style="width: 100%; height: 230px;"></div>
      </div>
    </div>

    <div ng-show="current == 'explain'">
      <div class="row">
        <pre style="overflow: auto; width: 100%; height: 230px; font-size: smaller">{{item.rawData.executionPlan.prettyPrint}}</pre>
      </div>
    </div>

  </div>
  <div class="query-info">
    <div class="row vertical-align">
      <div class="col-md-9">
        {{item.notification}}. Limit: {{item.limit}} <a class="btn btn-trasparent btn-sm queryConfigStyle"
                                                        href="javascript:void(0)" ng-click="changeLimit()"
                                                        onclick="document.getElementById('configQueryButton').click()">
        (change it)</a>

      </div>
      <div class="col-md-3">
        <ul class="nav nav-pills pull-right" ng-show="item.headers">
          <li ng-class="{active : current == 'table' }">
            <a href="javascript:void(0)" ng-click="current = 'table'">Table</a>
          </li>
          <li ng-class="{active : current == 'raw' }">
            <a href="javascript:void(0)" ng-click="current = 'raw'">Raw</a>
          </li>
          <li ng-class="{active : current == 'explain' }" ng-show="item.rawData.executionPlan">
            <a href="javascript:void(0)" ng-click="showExplain()">Explain</a>
          </li>
        </ul>
      </div>


    </div>
  </div>
</div>
